<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>成绩报表</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../css/font-awesome/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="../css/ionicons/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../css/AdminLTE/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" href="../css/skins/skin-blue.min.css">
    <link rel="stylesheet" href="../css/fileinput/fileinput.min.css">

    <link rel="stylesheet" href="../css/bootstrap/bootstrap-editable.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap-table.min.css">
    <link rel="stylesheet" href="../css/bootstrap/bootstrap-table-fixed-columns.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../js/plugins/browserhacks/html5shiv.min.js"></script>
    <script src="../js/plugins/browserhacks/respond.min.js"></script>
    <![endif]-->

    <!-- jQuery 3 -->
    <script src="../js/plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="../js/plugins/bootstrap/bootstrap.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../js/plugins/adminlte/adminlte.min.js"></script>

    <script src="../js/plugins/bootstrap/tableExport.min.js"></script>

    <script src="../js/plugins/bootstrap/bootstrap3-editable.min.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap-table.min.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap-table-fixed-columns.min.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap-table-zh-CN.min.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap-table-export.min.js"></script>
    <script src="../js/plugins/bootstrap/bootstrap-table-editable.min.js"></script>

    <!-- 文件上传插件-->
    <script src="../js/plugins/fileinput/fileinput.min.js"></script>
    <script src="../js/plugins/fileinput/zh.js"></script>
    <script src="../js/plugins/fileinput/theme.js"></script>

    <style>
        table {
            font-size: 12px;

        }

        table th, table td {
            padding: 0.25rem !important;
        }
    </style>

</head>
<body ng-app="myApp" ng-controller="filemyController">
<div class="container-fluid">
    <div class="row" style="margin-top:10px">
        <div class="col-sm-2 text-right">
            <h5>查询条件</h5>
        </div>
        <div class="col-sm-8">
            <ol class="breadcrumb" style="margin-bottom:5px">
                <li><a href="#">首页</a></li>
                <li><a href="#">2018级</a></li>
                <li><a href="#">1班</a></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 text-right">
            <h5>信息</h5>
        </div>
        <div class="col-sm-8">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="姓名/学号/18级1班班委">
                <span class="input-group-btn">
                    <button class="btn   btn-primary" type="button">查询</button>
                </span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 text-right">
            <h5>年级</h5>
        </div>
        <div class="col-sm-8">
            <a class="btn btn-link" href="#">2019级</a> <a class="btn btn-link" href="#">2018级</a> <a
                class="btn btn-link" href="#">2017级</a> <a class="btn btn-link" href="#">2016级</a>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-2 text-right">
            <h5>班级</h5>
        </div>
        <div class="col-sm-8">
            <a class="btn btn-link" href="#">1班</a> <a class="btn btn-link" href="#">2班</a>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">

        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div>

                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#basic" aria-controls="basic" role="tab"
                                                              data-toggle="tab">基本信息</a></li>
                    <li role="presentation"><a href="#arithmeticmean " aria-controls="arithmeticmean" role="tab"
                                               data-toggle="tab">算术平均分</a></li>
                    <li role="presentation"><a href="#creditsweighted" aria-controls="creditsweighted" role="tab"
                                               data-toggle="tab">学分加权平均分</a></li>
                    <li role="presentation"><a href="#averagecredit" aria-controls="averagecredit" role="tab"
                                               data-toggle="tab">平均学分绩点</a></li>
                    <li role="presentation"><a href="#gradepoint" aria-controls="gradepoint" role="tab"
                                               data-toggle="tab">学分绩点和</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="basic">
                        <div id="toolbar">
                        </div>
                        <table
                                id="table"
                                data-detail-view="true"
                                data-show-toggle="true"
                                data-search="true"
                                data-toggle="table"
                                data-toolbar="#toolbar"
                                data-show-columns="true"
                                data-click-to-select="true"
                                data-show-pagination-switch="true"
                                data-pagination="true"
                                data-id-field="id"
                                data-page-list="[10, 25, 50, 100, all]"
                                data-show-footer="true"
                                data-show-export="true"
                                class="table-striped"
                                data-detail-formatter="detailFormatter">
                            <thead>
                            <tr>
                                <th rowspan="2" data-field="学号" data-align="center" data-halign="center"
                                    data-sortable="true">学号
                                </th>
                                <th rowspan="2" data-field="姓名" data-align="center" data-halign="center">姓名</th>
                                <th colspan="5" data-align="center">
                                    第1学期
                                </th>
                            </tr>
                            <tr>


                                <th data-field="总分" data-sortable="true" data-align="center">总分</th>
                                <th data-field="总学分" data-align="center">总学分</th>
                                <th data-field="获得学分" data-align="center">获得学分</th>
                                <th data-field="不及格学分" data-align="center">不及格学分</th>
                                <th data-field="不及格门数" data-sortable="true" data-align="center">不及格门数</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="arithmeticmean">

                        <div id="arithmeticmeantoolBar">

                        </div>
                        <table
                                id="arithmeticmeanTable"
                                data-detail-view="true"
                                data-show-toggle="true"
                                data-search="true"
                                data-toggle="table"
                                data-toolbar="#arithmeticmeantoolBar"
                                data-show-columns="true"
                                data-click-to-select="true"
                                data-show-pagination-switch="true"
                                data-pagination="true"
                                data-id-field="id"
                                data-page-list="[10, 25, 50, 100, all]"
                                data-show-footer="true"
                                data-show-export="true"
                                class="table-striped">
                            <thead>
                                   <tr></tr>
                            </thead>
                        </table>

                    </div>
                    <div role="tabpanel" class="tab-pane" id="creditsweighted">
                        creditsweighted
                    </div>
                    <div role="tabpanel" class="tab-pane" id="averagecredit">
                        averagecredit
                    </div>
                    <div role="tabpanel" class="tab-pane" id="averagecredit">
                        gradepoint
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-2 col-sm-offset-10">
            <button class="btn btn-block btn-primary" ng-click="flushDatas();">刷新</button>
        </div>
    </div>
</div>
<script src="../js/plugins/angularjs/angular.min.js"></script>
<script src="../js/plugins/xlsx/xlsx.core.min.js"></script>

<script>
    var app = angular.module("myApp", []);


    app.controller("filemyController", function ($scope) {

        /*$scope.flushDatas = function () {
            var $table = $('#table');
            alert(JSON.stringify($table.bootstrapTable('getData')))
        }*/



   });
</script>
<script>
    /**案例参考地址：https://examples.bootstrap-table.com/#view-source
     * https://blog.csdn.net/wbx_wlg/article/details/89841653**/
    /*****表格样式*****/
    var $arithmeticmeanTable = $('#arithmeticmeanTable');
    console.log($arithmeticmeanTable);

    var arithmeticmeancolumns=[
        [{
            field: '姓名',
            title:'姓名',
            rowspan: 2,
            align: 'center',
            valign: 'middle'
        },
        {
            field: '学号',
            title:'学号',
            rowspan: 2,
            align: 'center',
            valign: 'middle'
        },
        {
            title:'第1学期算术平均分',
            colspan: 3,
            align: 'center',
            valign: 'middle'
        }],
        [{
            field: '算术平均分',
            title:'算术平均分',
            align: 'center',
            valign: 'middle'
        },
        {
            field: '班级排名',
            title:'班级排名',
            align: 'center',
            valign: 'middle'
        },
        {
            field: '专业排名',
            title:'专业排名',
            align: 'center',
            valign: 'middle'
        }  ]];


    $arithmeticmeanTable.bootstrapTable("destroy").bootstrapTable({
        //直接加载json数据
        data: [{"姓名":"孙悟空","学号":12342345123,"算术平均分":'78.99',"班级排名":23,"专业排名":40}],
        columns: arithmeticmeancolumns
    });

</script>

</body>
</html>